import React, {Component} from 'react'

import {getCarousel} from 'api/recommend'
import Swiper from './carousel/Swiper'
import Radio from './radio/Radio'
import Song from './song/Song'

import Scroll from '../../common/scroll/Scroll'
import './recommend.styl'

class Recommend extends Component {
    constructor(props) {
        super(props)
        this.state = {
            carouselList: [],
            radioList: [],
            songList: []
        }
    }
    componentDidMount() {
        getCarousel().then((res) => {
            console.log("获取排行榜：");
            if (res) {
                let {data} = res
                this.setState({
                    carouselList: data.slider,
                    radioList: data.radioList,
                    songList: data.songList
                })
            }
        });
    }

    render() {
        return (
            <div className='recommend'>
                <Scroll>
                    <div>
                        <Swiper carouselList={this.state.carouselList}></Swiper>
                        <div style={{padding: '10px', boxSizing: 'border-box'}}>
                            <Radio radioList={this.state.radioList}></Radio>
                            <Song songList={this.state.songList}></Song>
                        </div>
                    </div>
                </Scroll>
            </div>
        )
    }
}

export default Recommend